<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>音乐信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>歌单评论</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input placeholder="请输入内容" v-model="query" clearable @clear="getList">
            <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-table :data="MusComList.slice((currentPage-1)*5,currentPage*5)" style="width: 100%" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="uid" label="用户名">
          <template slot-scope="scope">
            {{UserName[scope.$index]}}
          </template>
        </el-table-column>
        <el-table-column prop="MusListName" label="歌单名">
          <template slot-scope="scope">
            {{MusName[scope.$index]}}
          </template>
        </el-table-column>
        <el-table-column prop="content" label="评论内容"></el-table-column>
        <el-table-column prop="time" label="时间">
          <template slot-scope="scope">
            {{scope.row.time | dateFormat}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteCom(scope.row.Comid)" ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination  @current-change="handleCurrentChange" :current-page="currentPage" :page-size="5"
                      layout="total,prev, pager, next, jumper" :total="MusComList.length">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "AMusCom",
  data(){
    return{
      query:'',
      currentPage:1,
      MusName:[],
      UserName:[]
    }
  },
  computed:{...mapState({
      MusComList:state=>state.music.MusComList,
    })},
  beforeCreate() {
    this.$store.dispatch('music/getMusComList',this.query)
  },
  created() {
      this.getMusName()
    this.getUser()
  },
  methods:{
    handleCurrentChange(val) {
      this.currentPage = val
    },
    getUser(){
      this.MusComList.map(item=>{
        console.log(item)
        this.$http.get('/api/user/search?id='+item.uid).then((res)=>{
          this.UserName.push(res.data.data.username)
        }).catch((error) => {
          console.log(error);
        });
      })
    },
    getMusName(){
      this.MusComList.map((item,i)=>{
              this.$http.get('/api3/playlist/detail?id='+item.Id).then((res)=>{
                this.MusName.push(res.data.playlist.name)
              }).catch((error)=>{
                console.log(error)
              })
          })
        },
    getList(){
      this.$store.dispatch('music/getMusComList',this.query)
    },
    async deleteCom(id){
      const delres=await this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err=>err);
      if(delres=="confirm"){
        const res=await this.$http.delete('api/Comment/del?id='+id)
        if(res.data.code!==1){this.$message.error('删除失败')}
        else{this.$message.success('删除成功')
          this.$store.dispatch('movie/getMovComList',this.query)
        }
      }else {
        this.$message.error('已经取消删除')
      }
    }
  }
}
</script>

<style scoped>

</style>
